<template>
  <div>
    <head-text titleText="计划回收"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
      </div>
      <div class="table-title">
        <h5>计划回收</h5>
      </div>
      <custom-table
        :tableData="tableData"
        :tableListData="tableListData"
        :tableBtn="tableBtn"
        :currentData="currentData"
        @handleRecovery="handleRecovery"
        @onPageChange="onPageChange"
        @onSizeChange="onSizeChange"
      ></custom-table>
    </div>
  </div>
</template>

<script>
import headText from "@c/headText";
import customTable from "@c/table"; 
import Search from "@c/search";
import {PLANWORKSTATUS ,PLANWORKPRIORITY } from '@u/wordbook'

import { getPlanWorkListURLApi,getrevertWorkPlanListURLApi, getCustomerListApi } from "@s/api";

export default {
  components: {
    headText,
    customTable,
    Search
  },
  data() {
    return {
      searchItem: [],
      searchData: {
        uid: "",
        name: "",
        planStartTime: "",
        planEndTime: "",
        actualStartTime: "",
        actualEndTime: "",
        status: "",
        priority: ""
      },
      planWorkStatus: PLANWORKSTATUS,
      planWorkPriority: PLANWORKPRIORITY,
      pageNo: 1,
      total: 0,
      pageSize: 10,
      currentData: {},
      tableData: [],
      customerSelect: []
    };
  },
  created() {
    this.searchItem = [
     {
        type: "select",
        label: "客户名称：",
        prop: "customerId",
        placeholder: "请选择",
        selectList: this.customerSelect
      },
      {
        type: "daterange",
        label: "计划完成日期：",
        timeFormat: "yyyy-MM-dd",
        timeList: ["planStartTime", "planEndTime"]
      },
      {
        type: "daterange",
        label: "实际完成日期：",
        timeFormat: "yyyy-MM-dd",
        timeList: ["actualStartTime", "actualEndTime"]
      },
      {
        type: "select",
        label: "完成状态",
        prop: "status",
        placeholder: "请选择",
        selectList: this.planWorkStatus
      },
      {
        type: "select",
        label: "优先级",
        prop: "priority",
        placeholder: "请选择",
        selectList: this.planWorkPriority
      },
    ];
    //  table表格
    this.tableListData = [
      { width: "50", label: "", type: "index" },
      { prop: "customerName", width: "", label: "客户名称" },
      { prop: "caseName", width: "", label: "案件名称" },
      { prop: "planStartTime", width: "", label: "计划开始时间" },
      { prop: "planEndTime", width: "", label: "计划结束时间" },
      { prop: "actualStartTime", width: "", label: "实际开始时间" },
      { prop: "actualEndTime", width: "", label: "实际结束时间" },
      { prop: "statusName", width: "", label: "完成状态" },
      { prop: "priorityName", width: "", label: "优先级" },
      { prop: "remark", width: "100", label: "备注" },
      { prop: "deleter", width: "100", label: "删除人" },
      { prop: "updateTime", width: "150px", type: "date", label: "删除日期" },
      { label: "操作", type: "btn", width: "180", fixed: "right" }
    ];
    // 按钮
    this.tableBtn = [
      {
        name: "恢复",
        btnType: "primary",
        handleFn: "handleRecovery"
      }
    ];
  },
  mounted() {
    this.getList();
    this.getCustomerSelect();
  },
  methods: {
    //获取列表
    getList() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      json.pageNo = this.pageNo;
      json.pageSize = this.pageSize;
      json.isDeleted = 1;
      getPlanWorkListURLApi(json).then((res) => {
        this.tableData = res.list;
        this.currentData.total = res.total;
      });
    },
     // 获取客户列表
    getCustomerSelect() {
      getCustomerListApi().then(res => {
        let newCustomerList = [];
        res.forEach(item => {
          var newItem = {
            id: item.id,
            value: item.customerName
          };
          newCustomerList.push(newItem);
        });
        this.customerSelect = newCustomerList;
        this.searchItem.forEach(item => {
          if (item.prop == "customerId") {
            item.selectList = this.customerSelect;
          }
        });
      });
    },
    onPageChange(val) {
      this.pageNo = val;
      this.getList();
    },
    onSizeChange(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.getList();
    },
    // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.pageNo = 1;
      this.pageSize = 10;
      this.$nextTick(() => {
        this.getList();
      });
    },
    // 恢复计划回收
    async handleRecovery(row) {
      const res = await getrevertWorkPlanListURLApi([row.id]);
      this.$message({
        type: "success",
        message: res
      });
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped></style>
